<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">
        当前位置：首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>问卷报告管理</el-breadcrumb-item>
      <el-breadcrumb-item>问卷管理</el-breadcrumb-item>
      <el-breadcrumb-item>编辑问卷</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <div slot="header">
        <div class="green-reactangle"></div>
        <span>基本信息</span>
      </div>

      <QuestionnaireBaseInfo
        ref="questionnaireBaseInfoRef"
        :questionnaireBaseInfo="questionnaireBaseInfo"
        @showQuestionnaireBaseInfo="getQuestionnaireBaseInfo"
      ></QuestionnaireBaseInfo>
    </el-card>

    <el-card style="margin-top: 10px">
      <div slot="header">
        <div class="green-reactangle"></div>
        <span>问题配置</span>
      </div>

      <div
        class="dash-border"
        style="height: 150px"
        v-if="questionConfig.length == 0"
      >
        <div style="line-height: 150px; text-align: center">
          <span>暂无问题，你可以</span>&nbsp;
          <el-link
            type="primary"
            :underline="false"
            style="font-size: 16px; vertical-align: inherit"
            @click="questionAddDialogVisible = true"
            >添加问题</el-link
          >
        </div>
      </div>
      <QuestionConfigShow
        :questionConfig="questionConfig"
        :questionnaireId="questionnaireId"
        @showQuestionAllData="getQuestionAllData"
        ref="questionConfigShowRef"
      ></QuestionConfigShow>

      <el-button
        class="theme-background-color"
        icon="el-icon-circle-plus-outline"
        style="margin-top: 20px"
        v-if="questionConfig.length != 0"
        @click="questionAddDialogVisible = true"
        >添加问题</el-button
      >
    </el-card>

    <!-- 操作按钮 -->
    <el-row class="subButton">
      <el-button @click="$router.push('/questionnaire/QuestionnaireManage')">
        取 消
      </el-button>
      <el-button @click="saveOnly"> 仅保存 </el-button>
      <el-button class="theme-background-color" @click="saveAndRelease">
        保存并发布
      </el-button>
    </el-row>

    <!-- 添加问题弹窗 -->
    <QuestionAdd
      :questionAddDialogVisible.sync="questionAddDialogVisible"
      :questionnaireId="questionnaireId"
      @showQuestionInfo="getQuestionInfo"
    ></QuestionAdd>
  </div>
</template>

<script>
import QuestionnaireBaseInfo from './QuestionnaireBaseInfo.vue'
import QuestionAdd from './QuestionAdd.vue'
import QuestionConfig from './QuestionConfig.vue'
import QuestionConfigShow from './QuestionConfig.vue'
export default {
  components: {
    QuestionnaireBaseInfo,
    QuestionAdd,
    QuestionConfig,
    QuestionConfigShow
  },
  data() {
    return {
      questionAddDialogVisible: false,
      baseInfo: {},
      questionConfig: [],
      questionnaireId: '',
      questionAllData: [],
      questionnaireBaseInfo: {}
    }
  },
  created() {
    this.questionnaireId = this.$route.query.id
    this.getQuestionnaireData()
  },
  methods: {
    getQuestionnaireBaseInfo(data) {
      this.baseInfo = JSON.parse(JSON.stringify(data))
    },
    getQuestionInfo(data) {
      this.questionConfig.push(JSON.parse(JSON.stringify(data)))
      console.log(this.questionConfig)
    },
    getQuestionAllData(data) {
      this.questionAllData = JSON.parse(JSON.stringify(data))
    },
    async saveOnly() {
      // 校验基本信息
      const flag = this.$refs.questionnaireBaseInfoRef.validateForm()
      if (!flag) return

      this.$refs.questionConfigShowRef.getData()
      console.log(this.questionAllData)
      const postData = Object.assign(this.baseInfo, {
        question_data: this.questionAllData,
        status: 0
      })
      const { data: res } = await this.$http.post(
        '/admin/question_manage/edit',
        postData
      )
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.$message.success('保存成功')
      this.active = 2
      this.$router.push('/questionnaire/QuestionnaireManage')
    },
    async saveAndRelease() {
      // 校验基本信息
      const flag = this.$refs.questionnaireBaseInfoRef.validateForm()
      if (!flag) return

      // 调发布的接口
      this.$refs.questionConfigShowRef.getData()
      const postData = Object.assign(this.baseInfo, {
        question_data: this.questionAllData,
        status: 1
      })
      const { data: res } = await this.$http.post(
        '/admin/question_manage/edit',
        postData
      )
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.$message.success('保存并发布成功')
      this.active = 2
      this.$router.push('/questionnaire/QuestionnaireManage')
    },
    async getQuestionnaireData() {
      const { data: res } = await this.$http.post(
        '/admin/question_manage/getEditQuestionManage',
        {
          id: this.questionnaireId
        }
      )
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.questionnaireBaseInfo = res.data
      this.questionConfig = res.data.question_data
      console.log(this.questionnaireBaseInfo)
    }
  }
}
</script>

<style lang="less" scoped>
.green-reactangle {
  width: 1px;
  height: 10px;
  border: 1px solid #2ba79c;
  background-color: #2ba79c;
  display: inline-block;
  margin-right: 5px;
}
.dash-border {
  border: 1px dashed #dbdbdb;
  padding: 15px;
  margin-bottom: 10px;
}
.subButton {
  margin-top: 10px;
  .el-button {
    width: 160px;
  }
}
</style>
